import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class TodoHeader extends Component {

  // 设置运行时类型检测规则
  static propTypes = {
    title: PropTypes.string.isRequired,
    subtitle: PropTypes.string,
  }

  // 设置组件接收属性的默认值
  static defaultProps = {
    title: '默认的主标题',
    subtitle: '默认的副标题',
  }

  render() {
    // 从属性中获取主/副标题
    const { title, subtitle, children } = this.props

    return (
      <section className="hero is-primary">
        <div className="hero-body">
          {
            children
              ?
              children
              :
              (
                <>
                  <p className="title">
                    { title }
                  </p>
                  <p className="subtitle">
                    { subtitle }
                  </p>
                </>
              )
          }
        </div>
      </section>
    )
  }
}
